<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/index.css">
    <!-- 引入样式 -->
    <!--    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
    <!--    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>-->
    <!-- import Vue before Element -->
    <!--    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>-->
    <script src="js/axios.min.js"></script>
    <script src="js/vue.js"></script>
    <script src="js/index.js"></script>
</head>

<body>
<div id="app">
    <template>
        <el-row :gutter="20" class="demo-avatar demo-basic">
            <el-col :span="20">
                <div class="demo-basic--circle">
                    <div class="block">
                        <el-avatar :size="50" :src="circleUrl"></el-avatar>
                        <div v-model="userName">{{ userName }}</div>
                    </div>
                </div>
            </el-col>
            <el-col :span="2">
                <el-button @click="loginOut()">退出登录</el-button>
            </el-col>
        </el-row>
        <el-row>
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="fileName" label="文件名" width="180">
                </el-table-column>
                <el-table-column prop="fileLength" label="大小" width="180">
                </el-table-column>
                <el-table-column prop="fileCreateTime" label="创建时间">
                </el-table-column>
            </el-table>
        </el-row>
    </template>
</div>
</body>

</html>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                circleUrl: "",
                userName: "",
                tableData: [],
            };
        },
        methods: {
            fetchServerData() {
                axios.get('http://localhost:8080/fileList')
                    .then(response => {
                        this.tableData = response.data;
                        console.log(this.tableData);
                    })
                    .catch(error => {
                        console.error('获取服务器数据时出错：', error);
                    });
            },
            getAvatarUrl() {
                axios.get('http://localhost:8080/getUserAvatar')
                    .then(response => {
                        this.circleUrl = response.data.avatar;
                        this.userName = response.data.username;
                        console.log(this.circleUrl + 'jijiji');
                    })
                    .catch(error => {
                        console.error('获取服务器数据时出错：', error);
                    });
            },
            loginOut() {
                axios.get('http://localhost:8080/user/loginOut')
                    .then(response => {
                        if (response.data == "nullStatus") {
                            window.location.href = "/index.html";
                        }
                    })
                    .catch(error => {
                        console.error('获取服务器数据时出错：', error);
                    });
            }
        },
        created() {
            // 当组件创建时获取服务器数据
            this.interval = setInterval(() => {
                this.fetchServerData()
                console.log("定时器...")
            }, 2000)
            this.getAvatarUrl();
        },
        beforeDestroy() {
            clearInterval(this.interval)
        }
    })
</script>